// 主题色、背景色和字体色变量
@primary: #1baeae; // 主题色
@orange: #ff6B01; // 橙色
@bc: #F7F7F7; // 背景色
@fc: #fff; // 字体颜色

// 背景图片和地址大小设置
.bis(@url) {
  background-image: url(@url); // 背景图片地址
  background-repeat: no-repeat; // 背景不重复
  background-size: 100% 100%; // 背景大小设置为完全填充
}

// 圆角设置
.borderRadius(@radius) { // 参数 @radius 表示圆角半径
  -webkit-border-radius: @radius; // 兼容 Webkit 内核
  -moz-border-radius: @radius; // 兼容 Mozilla 内核
  -ms-border-radius: @radius; // 兼容 IE 内核
  -o-border-radius: @radius; // 兼容 Opera 内核
  border-radius: @radius; // 通用圆角设置
}

// 1px 底部边框
.border-1px(@color) { // 参数 @color 表示边框颜色
  position: relative; // 设置相对定位
  &:after {
    display: block; // 转换为块级元素
    position: absolute; // 绝对定位
    left: 0;
    bottom: 0;
    width: 100%; // 宽度占满
    border-top: 1px solid @color; // 顶部边框为 1px 固定
    content: ''; // 清除默认内容
  }
}

// 定位全屏
.allcover {
  position: absolute; // 绝对定位
  top: 0;
  right: 0;
}

// 定位上下和左右居中
.center {
  position: absolute; // 绝对定位
  top: 50%; // 距离顶部 50%
  left: 50%; // 距离左侧 50%
  transform: translate(-50%, -50%); // 利用 transform 实现完全居中
}

// 定位水平居中
.ct {
  position: absolute; // 绝对定位
  left: 50%; // 距离左侧 50%
  transform: translateX(-50%); // 利用 transform 实现水平居中
}

// 宽、高设置
.wh(@width, @height) { // 参数 @width 和 @height 表示宽和高
  width: @width; // 宽度
  height: @height; // 高度
}

// 字号和颜色设置
.sc(@size, @color) { // 参数 @size 表示字体大小，@color 表示字体颜色
  font-size: @size; // 设置字体大小
  color: @color; // 设置字体颜色
}

// box-sizing 属性设置
.boxSizing {
  -webkit-box-sizing: border-box; // Webkit 内核兼容
  -moz-box-sizing: border-box; // Mozilla 内核兼容
  box-sizing: border-box; // 通用设置
}
// flex 布局及子元素对齐方式
.fj(@type: space-between) { // 参数 @type 表示对齐方式，默认为 space-between
  display: flex; // 定义为 flex 布局
  justify-content: @type; // 子元素对齐方式
}
